<template>
  <el-collapse-item name="handle">
    <template slot="title">
      <PartitionTitle title="异常处理情况"></PartitionTitle>
    </template >

    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="160px">
      <template v-if='row && row.status == 1'>
        <el-row type="flex" v-if='abnormalData.equipmentName'>
          <el-col :span="8">
            <el-form-item label="是否为本机台异常" prop="itself">
              <el-select
                placeholder="请选择是否为本机台异常"
                clearable
                v-model="form.itself"
                size="small"
              >
                <el-option
                  v-for="item in optionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="18">
            <el-form-item label="异常原因" prop="abnormalDes">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2}"
                maxlength="150"
                show-word-limit
                placeholder="请输入异常原因"
                v-model="form.abnormalDes">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>

      <el-row type="flex">
        <el-col :span="18">
          <el-form-item label="本次处理方法" prop="handleDes">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2}"
              maxlength="150"
              show-word-limit
              placeholder="请输入本次处理方法"
              v-model="form.handleDes">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="处理结果" prop="over">
            <el-radio-group v-model="form.over">
              <el-radio :label="true">已完成处理</el-radio>
              <el-radio :label="false">待跟进</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" v-if='!form.over'>
        <el-col :span="24">
          <el-form-item label="预计解决时间" prop="completeDate">
              <el-date-picker
                clearable
                v-model="form.completeDate"
                :picker-options="pickerOptions"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
              </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="附件">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :headers="{Authorization:token}"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-upload='beforeAvatarUpload'
              :on-success='handleSuccess'
              :accept="acceptFile"
              multiple
              :limit="10"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">请上传大小不超过 5MB 格式为 jpg/png/gif/pdf/doc/docx/xls/xlsx/ppt/pptx/jpeg/zip 的文件，最多10个。</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-collapse-item>
</template>
<script>
  import { getToken } from '@/utils/auth'
  import { fileTypes } from '@/utils/file'
  import service from "@/utils/request";
  import { GEN_SERVER } from '@/config/baseUrl'
export default {
  props:{
    mode:{
      type:String,
      default:""
    },
    row:{
      type:Object,
      default:()=>{}
    },
    abnormalData:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
      form:{
        itself:"",
        handleDes:"",
        abnormalDes:"",
        over:"",
        completeDate:'',
        fileIds:[]
      },
      optionList:[
        {label:"是",value:true},
        {label:"否",value:false},
      ],
      rules: {
        itself: [
          { required: true, message: "请选择是否为本机台异常", trigger: "change" },
        ],
        abnormalDes:[
          {required: true,message: "请输入异常原因", trigger: "blur" }
        ],
        handleDes:[
          {required: true,message: "请输入本次处理方法", trigger: "blur" }
        ],
        over:[
          {required: true,message: "请选择处理结果", trigger: "change" }
        ],
        completeDate:[
          {required: true,message: "请选择预计解决时间", trigger: "change" }
        ]
      },
      fileTypes,
      fileList:[],
      pickerOptions: {
      	disabledDate(date) {
      		return date.getTime() < Date.now() - 8.64e7;
      	}
      }
    };
  },

  computed:{
    uploadUrl(){
      return service.baseURL + GEN_SERVER['form-server'] + '/refine/report/upload'
    },
    token() {
      return 'Bearer ' + getToken()
    },
    acceptFile(){
      return Object.values(this.fileTypes).join(",")
    }
  },

  methods:{
    handleSuccess(response, file, fileList){
      this.fileList = fileList;
      this.form.fileIds = fileList.map(ele => ele.response?.data)
    },

    handleRemove(file, fileList) {
      this.fileList = fileList;
      if(fileList?.length){
        this.form.fileIds = fileList.map(ele => ele.response?.data)
      }else{
        this.form.fileIds = []
      }
    },

    getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },

    handlePreview(file) {
      var previewUrl = this.getObjectURL(file.raw);
      window.open(previewUrl)
    },

    beforeAvatarUpload(file){
      if(!this.acceptFile.includes(file.type)){
        this.msgWarning("暂不支持上传该格式文件");
        return false
      }
      if(file.size / 1024 / 1024  > 5){
        this.msgWarning("上传的附件大小不得超过5M");
        return false
      }
    },

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 10个文件，本次选择了 ${files.length} 个文件`);
      return false
    }
  },
  watch:{
    abnormalData:{
      handler(newVal){
        if(newVal?.completeDate){
          this.form.completeDate = newVal?.completeDate;
        }
      },
      deep: true,
      immediate: true
    }
  },
};
</script>
<style lang="scss" scoped>
.block-title {
  margin-bottom: 0;
}
</style>
